<template>
	<view class="container">
		<uni-nav-bar title="关于裕酷" fixed statusBar :border="false" height="88rpx" left-icon="left" @clickLeft="onClickLeft"></uni-nav-bar>
		<uni-swiper-dot class="uni-swiper-dot-box" @clickItem="clickItem" :info="info" :current="current" mode="default"
			:dotsStyles="{ backgroundColor: '#E6E6E6', selectedBackgroundColor: '#2979ff', bottom: 5 }" field="content">
			<swiper class="swiper" :autoplay="true" :interval="3000" @change="change" circular>
				<swiper-item v-for="(item,index) in info" :key="item.id">
					<view class="swiper-item">
						<image :src="item.imgUrl" mode="aspectFill"></image>
					</view>
				</swiper-item>
			</swiper>
		</uni-swiper-dot>
		<view class="info">
			裕酷科技成立于2014年，是一家专门为商超、零售等本地生活商家提供数智化、开放化、生态化解决方案，致力于满足商家多场景、多维度经营需求的SaaS服务商。
		</view>
	</view>
</template>

<script>
	import { reqBannerList } from '@/apis/user.js'
	export default {
		name: "About",
		data() {
			return {
				swiperDotIndex: 0,
				current: 0,
				info: []
			}
		},
		onLoad() {
			this.getBannerList();
		},
		methods: {
			async getBannerList() {
				let res = await reqBannerList();
				if(res.code === 200) {
					this.info = res.data.list;
				}
			},
			clickItem(e) {
				this.swiperDotIndex = e
			},
			change(e) {
				this.current = e.detail.current
			},
		},
	}
</script>

<style>
	page {
		background: #f7f7f7;
	}
</style>

<style lang="scss" scoped>
	.swiper {
		width: 750rpx;
		height: 400rpx;
	}

	.swiper-item {
		width: 100%;
		height: 400rpx;

		image {
			width: 100%;
			height: 100%;
		}
	}
	.info {
		text-indent: 2em;
		font-size: $uni-font-size-unBase;
		line-height: 38rpx;
		padding: 20rpx 15rpx;
		box-sizing: border-box;
	}
</style>